<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title></title>
 <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="/assets/fonts/line-icons.css">
 <link href="/assets/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
 <link href="/assets/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
 <link href="/assets/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" type="text/css" href="/assets/css/main.css">
 <link rel="stylesheet" type="text/css" href="/assets/css/responsive.css">
</head>
<body>
<div class="card-header border-bottom">
 <h4 class="card-title">排片信息管理</h4>
</div>
<div th:if="${paFilms.items.size() != 0}">
 <form id="rangeQuery">
  <div class="card-body">
   <span>日期范围查询:</span>
   <input type="datetime-local" name="startTime" th:value="${films?.startTime}">
   <span>到</span>
   <input type="datetime-local" name="stopTime"  th:value="${films?.stopTime}"  >

   <span>影厅查询:</span>
   <select name="cinemaId">
     <option value="">请选择</option>
     <option th:each="t , line : ${cinemaList}" th:value="${ t.id }"  th:selected="${films.cinemaId==t.id}" th:text="${t.hall}"></option>
   </select>
   <span th:text="${films?.cinemaId}"></span>
   <span>电影名称查询:</span>
   <input type="text" name="movieName" th:value="${movie?.movieName}">
   <input class="btn btn-common" type="button" value="查询" id="movieQuery">
  </div>
 </form>
 <div class="table-responsive">
  <table id="datatable" class="table table-bordered">
   <thead>
   <tr>
    <th>电影名称</th>
    <th>开始时间</th>
    <th>结束时间</th>
    <th>影厅</th>
    <th>影厅类型</th>
    <th>票价</th>
    <th>间隔时间</th>
    <th>状态</th>
    <th>操作</th>
   </tr>
   </thead>
   <tbody>
   <tr th:each="t,line:${paFilms.items}">
    <td th:text="${t.movie.movieName}"></td>
    <td th:text="${#dates.format(t.startTime,'yyyy-MM-dd HH:mm:ss')}"></td>
    <td th:text="${#dates.format(t.stopTime,'yyyy-MM-dd HH:mm:ss')}"></td>
    <td th:text="${t.cinema.hall}"></td>
    <td th:text="${t.cinema.type==0?'imax厅':'普通厅'}"></td>
    <td th:text="${t.price}"></td>
    <td th:text="|${t.spare}分钟|">/td>
    <td th:text="${ #dates.format(t.stopTime,'yyyy-MM-dd HH:mm:ss') &lt; #dates.format(date, 'yyyy-MM-dd HH:mm:ss') ? '放映结束':'正常放映' }"></td>
    <td th:id="${ t.id }">
     <a href="javascript:void(0)" class="bianji">编辑</a>
    </td>
   </tr>
   </tbody>
  </table>
  <div id="jump">
   <a href="javascript:void (0)" class="btn btn-common">首页</a>
   <a href="javascript:void (0)" class="btn btn-common">上一页</a>
   <a href="javascript:void (0)" class="btn btn-common">下一页</a>
   <a href="javascript:void (0)" class="btn btn-common">尾页</a>
  </div>
 </div>
</div>
<div th:if="${paFilms.items.size() == 0}">没有可以修改的排片信息</div>
<script type="text/javascript" th:inline="javascript">
 var curr = [[${paFilms.curr}]];
 var total = [[${paFilms.total}]];

 if(curr == 1){
  $("#jump a:lt(2)").hide()
 }
 if(curr == total){
  $("#jump a:gt(1)").hide()
 }

   $("#jump a:eq(0)").bind("click",function () {
     toJump("/films/updateQuery",$("#rangeQuery").serialize()+"&curr="+1)
   })
  $("#jump a:eq(1)").bind("click",function () {
     toJump("/films/updateQuery",$("#rangeQuery").serialize()+"&curr="+[[${paFilms.curr-1}]])
   })
  $("#jump a:eq(2)").bind("click",function () {
     toJump("/films/updateQuery",$("#rangeQuery").serialize()+"&curr="+[[${paFilms.curr+1}]])
   })
  $("#jump a:eq(3)").bind("click",function () {
     toJump("/films/updateQuery",$("#rangeQuery").serialize()+"&curr="+[[${paFilms.total}]])
   })


 $("#movieQuery").bind("click",function () {
  toJump("/films/updateQuery",$("#rangeQuery").serialize())
 })

 $(".bianji").bind("click",function () {
  var id = $(this).parent().attr("id")
  toJump("/films/unique","&id="+id)
 })

</script>

<script src="/assets/js/jquery-min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/jquery.app.js"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<script src="/assets/plugins/datatables/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables/buttons.bootstrap4.min.js"></script>
<script src="/assets/plugins/datatables/jszip.min.js"></script>
<script src="/assets/plugins/datatables/pdfmake.min.js"></script>
<script src="/assets/plugins/datatables/vfs_fonts.js"></script>
<script src="/assets/plugins/datatables/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables/buttons.print.min.js"></script>
<script src="/assets/plugins/datatables/buttons.colVis.min.js"></script>
<script src="/assets/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables/responsive.bootstrap4.min.js"></script>
</body>
</html>